<template>
  <div ref="chartDom"  style="width: 600px; height: 400px;"/>
</template>
<script setup name="saleByDay">
import {saleByItemType} from '@/api/system/report.js'
const {proxy} = getCurrentInstance();


function getData() {
 /* if (!props.queryParams.time) {
    console.log("加载")
    return
  }*/
  saleByItemType({
    'startTime': proxy.parseTime(props.queryParams.time[0], "{y}-{m}-{d}"),
    'endTime': proxy.parseTime(props.queryParams.time[1], "{y}-{m}-{d}"),
    'itemType': props.queryParams.itemType
  }).then(response => {
    let countType = props.queryParams.countType
     let data = response.data.map(item=> {
        return {"value":countType == '销售额'?item.price:item.count, 'name':item.item_model}
     })
    option.value = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '0%',
        left: 'center'
      },
      series: [
        {
          name: countType,
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data
        }
      ]
    };
    myChart.value.setOption(option.value, true);
  });
}


//
import {ref, onMounted, watch, markRaw} from "vue";
import * as echarts from "echarts";

const option = ref(null);

const chartDom = ref(null);
const myChart = ref(null);
const props = defineProps({
  queryParams: {
    time: [],
    itemType: null,
  },
  style: {
    type: Object,
    default: () => ({
      width: "90%",
      height: "400px",
    }),
  },
});
const resizeHandler = () => {
  myChart.value.resize();
};
onMounted(() => {
  getData()
  myChart.value = markRaw(echarts.init(chartDom.value));

  window.addEventListener("resize", resizeHandler);
});
watch(
    () => props.queryParams,
    (newOptions) => {
      getData()
    },
    {
      deep: true,
    }
);

defineExpose({
  resizeHandler,
});
</script>